<template>
  <div>
    <h3>添加新商品</h3>
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="商品名称"                    >
        <el-input v-model="form.name"></el-input>
      </el-form-item              >
      <el-form-item label="商品价格">
        <el-input v-model="form.price"></el-input>
      </el-form-item>

      <el-form-item label="商品图片">
        <el-upload
           name="photo"
           list-type="picture-card"
            class="avatar-uploader"
            action="http://localhost:9999/user/upload"
            :show-file-list="true"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
           :on-preview="handlePictureCardPreview"
           :on-remove="handleRemove"
          :file-list="fileList"
        >
          <i class="el-icon-plus"></i>

          <!--放大显示图片预览的对话框-->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>

        </el-upload>

      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        price: '',
        photoPath: []
      },
      dialogImageUrl: '',
      dialogVisible: false,
      fileList: []
    }
  },
  methods: {
    onSubmit() {
      // 发送异步请求，保存新商品
      console.log('fileList', this.fileList)

      // 如何获取当前多图片上传组件中的图片路径
      this.form.photoPath = []
      for (let i = 0; i < this.fileList.length; i++) {
        let file = this.fileList[i]
        this.form.photoPath.push(file.response)
      }

      console.log('form', this.form)
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 文件上传成功后
    handleAvatarSuccess(res, file) {
      console.log('res', res)
      console.log('file', file)
      this.fileList.push(file)
    },
    // 文件上传之前
    beforeAvatarUpload(file) {
      // 判断要上传的文件类型是否是图片
      const isJPG = file.type === 'image/jpeg';
      // 1kb=1024byte  1mb=1024kb  1gb=1024mb
      // 判断要上传的文件大小是否超过2mb
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
